<template>
	<div>
		<Echart :options="options" id="line_a" ref="line_a" width="100%" height="170px"></Echart>
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		data() {
			return {
				options: {},
			};
		},
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		watch: {
			cdata: {
				handler(newData) {
					
					this.options = {
						color: ['#5B8FF9'],
						tooltip: {
							// trigger: 'axis',
							// formatter: function(params) {
							// 	console.log(params)
							// 	const box = `
							//                <div class="tooltip-box">
							//                  <div class="inner">
							//                    <div class="hd">
							//                      <h3 class="title">${params.name}</h3>
							//                    </div>
							//                    <div class="bd">
							//                      <p><strong class="name">${params.seriesName}:</strong><span class="number">${params.value}</span><span class="unit">人</span></p>
							//                    </div>
							//                  </div>
							//                </div>`;
							// 	return box;
							// },
							// backgroundColor: "rgba(255,255,255,0.1)",
							// axisPointer: {
							//   type: "shadow",
							//   label: {
							//     show: true,
							//     backgroundColor: "#7B7DDC"
							//   }
							// }
						},
						grid: {
							x: 0,
							y: 20,
							x2: 30,
							y2: 10,
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							data: newData.scale,
							axisLine: {
								lineStyle: {
									color: '#ffffff'
								}
							},
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								color: '#ffffff',
								textStyle: {
									fontSize: 10
								},
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#4c9bfd'
								}
							},
							axisLine: {
								show: false
							},
						},
						series: [{
							name:newData.name,
							type: 'line',
							smooth: true,
							data: newData.seriesData,
							label: {
								show: true,
								position: 'top',
								formatter: '{c}s',
								textStyle: {
									fontSize: 10,
									color: '#ffffff',
									fontSize: 10,
								}
							},
						}]
					}
				},
				immediate: true,
				deep: true
			}
		}
	};
</script>

<style scoped>
</style>